<script setup>
import { reactive, ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '../stores/auth'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

const form = reactive({
  email: '',
  password: '',
})

const loading = ref(false)
const error = ref('')

const redirectTarget = computed(() => {
  const redirect = route.query.redirect
  return typeof redirect === 'string' ? redirect : '/profile'
})

async function handleSubmit() {
  error.value = ''
  loading.value = true

  try {
    await authStore.login({ ...form })
    router.push(redirectTarget.value)
  } catch (err) {
    error.value = err.message || '登录失败，请稍后再试'
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="auth-page">
    <div class="auth-card">
      <h2 class="auth-title">登录 FitMatch Pro</h2>
      <p class="auth-subtitle">欢迎回来，继续你的训练旅程</p>

      <form class="auth-form" @submit.prevent="handleSubmit">
        <div class="form-field">
          <label for="email">邮箱</label>
          <input
            id="email"
            v-model="form.email"
            type="email"
            required
            placeholder="请输入邮箱地址"
          />
        </div>

        <div class="form-field">
          <label for="password">密码</label>
          <input
            id="password"
            v-model="form.password"
            type="password"
            required
            minlength="6"
            placeholder="请输入密码"
          />
        </div>

        <p v-if="error" class="form-error">
          {{ error }}
        </p>

        <button class="submit-btn" :disabled="loading">
          {{ loading ? '登录中...' : '登录' }}
        </button>
      </form>

      <p class="switch-text">
        还没有账号？
        <RouterLink :to="{ name: 'register', query: { redirect: redirectTarget } }">
          立即注册
        </RouterLink>
      </p>
    </div>
  </div>
</template>

<style scoped>
.auth-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
  padding: 40px 20px;
  color: #fff;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: rgba(15, 15, 35, 0.85);
  border-radius: 16px;
  padding: 40px 35px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
}

.auth-subtitle {
  margin: 10px 0 30px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.form-field input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input:focus {
  outline: none;
  border-color: #00f5ff;
  box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.15);
}

.form-error {
  margin: 0;
  color: #ff6b6b;
  font-size: 14px;
  text-align: center;
}

.submit-btn {
  margin-top: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #00f5ff, #ff00ff);
  color: #0f0f23;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.submit-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 35px rgba(255, 0, 255, 0.25);
}

.switch-text {
  margin-top: 25px;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
}

.switch-text a {
  color: #00f5ff;
  font-weight: 600;
}
</style>
